B11 Introduccion a html: 2013

lunes, 29 de julio de 2013

Codigo PHP Envio Correo (Guardar Como html_form_send.php)

<?php
if(isset($_POST['email'])) {

    // CHANGE THE TWO LINES BELOW
    $email_to = "sucorreo@yahoo.com";

    $email_subject = "website html Correos";


    function died($error) {
        // your error code can go here
        echo "Lo sentimos pero tienes que llenar los campos Correspondientes*. ";
        echo "Se muestran los errores a continuacion.<br /><br />";
        echo $error."<br /><br />";
        echo "Llena los campos.<br /><br />";
        die();
    }

    // validation expected data exists
    if(!isset($_POST['first_name']) ||
        !isset($_POST['last_name']) ||
        !isset($_POST['email']) ||
        !isset($_POST['telephone']) ||
        !isset($_POST['comments'])) {
        died('Lo sentimos pero hubo un error');
    }

    $first_name = $_POST['first_name']; // required
    $last_name = $_POST['last_name']; // required
    $email_from = $_POST['email']; // required
    $telephone = $_POST['telephone']; // not required
    $comments = $_POST['comments']; // required

    $error_message = "";
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from)) {
    $error_message .= 'Direccion de correo invalida.<br />';
}
    $string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$first_name)) {
    $error_message .= 'Nombre incorrecto.<br />';
}
if(!preg_match($string_exp,$last_name)) {
    $error_message .= 'Apellido incorrecto.<br />';
}
if(strlen($comments) < 2) {
    $error_message .= 'Comentarios invalidos.<br />';
}
if(strlen($error_message) > 0) {
    died($error_message);
}
    $email_message = "Form details below.\n\n";

    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }

    $email_message .= "First Name: ".clean_string($first_name)."\n";
    $email_message .= "Last Name: ".clean_string($last_name)."\n";
    $email_message .= "Email: ".clean_string($email_from)."\n";
    $email_message .= "Telephone: ".clean_string($telephone)."\n";
    $email_message .= "Comments: ".clean_string($comments)."\n";


// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>



Gracias por su correo.

<?php
}
die();
?>

lunes, 15 de julio de 2013

Pagina simple HTML y CSS

Pagina con HTML y CSS

domingo, 30 de junio de 2013

Entregas Parcial 2

Entrega del 15 al 19 Julio

Web page por pareja (3.0)

Desarrolla una página por parejas, donde uses al menos 5 reglas CSS, uses 5 imágenes, al menos un párrafo con 5 líneas.
Primera pagina Bienvenida, donde esta solo una imagen al centro, al dar click, entramos a la segunda pagina donde se encuentran el texto y las imágenes.

Avance Proyecto Final (5.0)

Puedes seguir usando los archivos HTML, que entregaste en primer parcial o puedes hacer algo nuevo.

El sitio debe estar conformado por al menos 3 páginas web y links entre ellos. (ejemplo: Home, galería, Biografía)

Utilizar comandos CSS para mejorar el estilo de tu página. (Decide si utilizar External y/o embeded y/o inline)

Optimizar la resolución de las imágenes, utilizar 5 imágenes mínimo en una Galería.

Investigación (1.0)
Mandar por correo

Has un resumen no mayor a una cuartilla ni menor a 5 párrafos o puedes explicarlo gráficamente de la Historia de World Wide Web. NO SOLO CONSULTES WIKIPEDIA Y NO COPIES Y PEGUES. Agrega las direcciones de al menos 2 fuentes digitales consultadas o Bibliografías.

domingo, 23 de junio de 2013

Texto

Fuente
font-family:

La propiedad font-family te permite especificar que fuente vas a utilizar en los elementos y a que regla de CSS aplica.
El valor de esta propiedad indica al usuario que fuente debe tener instalada, para poder mostrarla en su navegador. se pueden dar opciones separado por comas. Si la fuente esta hecha de dos palabras se usa " ".

body {
font-family: Impact, Times, serif;}
h1, h2 {
font-family: Arial, Verdana, Helvetica;}
#encabezado{
font-family: "Courier New", Courier,
monospace;}

Tamaño de fuente
font-size:

El valor de esta propiedad nos va dar el tamaño y puede ser especificado en:

Pixeles (px)
Porcentaje (80%) el tamaño de una fuente por defecto es 16px, por lo tanto será del 80% de 16px ( resultado 12.8px), se pueden usar valores mayores al 100% por ejemplo 200% ( resultará 32px)
em un em es equivalente a la anchura de la letra "m"

h1 {
font-size: 14px;}
h2
{
font-size: 1.5em;}
p, a {
font-size; 150%;}

Usar Fuente instalada en el sitio
@font-face:

Permite usar una fuente aunque no este instalada en la computadora de una persona, se tiene que especificar la ruta donde se encuentra esta fuente, hay que tener 4 archivos diferentes de la fuente dentro de la ruta de la página web:

eot
woff
ttf/oft
svg

font-face {

font-family: 'HardRock';

src: url('fonts/HardRock.eot');

src: url('fonts/HardRock.eot?#iefix')

format('embedded-opentype'),

url('fonts/HardRock.woff') format('woff'),

url('fonts/HardRock.ttf')

format('truetype'),

url('fonts/HardRock.svg#HardRockRegular')

format('svg');}

Bold
font-weight:

normal
bold
lighter
bolder

Italic
font-style:

normal
italic
oblique

Mayúsculas y minúsculas
text-transform:

lowercase
uppercase
capitalize

Subrayado
text-decoration:

none
underline
overline

line-through
blink

Espacios entre líneas, letras y palabras
line-height:
letter-spacing:
word-spacing:

px
%
em

Alineación de texto
text-align:

left
right
justify
center

Alineación de texto vertical
vertical-align:

baseline
sub
super
top
text-top
middle
bottom
text-bottom

Sombra de texto
text-shadow:

Usa 4 valores, el primero indica izquierda o derecha (x), segundo arriba o abajo (y), tercer valor opcional, la cantidad de blur, y el caurto el color de la sombra.

h1 {
background-color: #cccccc;
color: #ffffff;
text-shadow: 3px 2px 5px #111111;}

Color dentro de CSS

Color de Texto
color:

Valores RGB
color: rgb(20,0,255);

Códigos Hexa decimáles
color: #00eeaa;

Nombre del color
color: seagreen;

Hay 147 nombres nombres de colores predefinidos.

Color de Fondo
background-color:

Por defecto todos los navegadores manejan un fondo de color blanco. Para poner un fondo de color se declara en la hoja de estilo en body.
body {
background-color: darkgray;
}
h1{
color: black;
background-color: #87cefa
}

Cuando escojas colores de fondo y haya texto:

Un contraste bajo hace la lectura difícil
Un alto contraste hace la lectura más fácil
Un contraste medio es utilizado para grandes párrafos de lectura

domingo, 16 de junio de 2013

Introducción CSS

CSS Cascading Style Sheet

Una manera más fácil de dar formato a las páginas Web.

CSS usa reglas para dar un mejor control en cada uno de los elementos que conforman nuestra(s) página.
CSS asocia las reglas con elementos de HTML.
Tiene una sintesis muy sencilla que consta de "Selectores", "Propiedades" y "Valores" juntos crean reglas de Estilo

Construcción de una regla CSS

-----------------Selector {Propiedad:Valor;}

html---------------- p {color:blue;font-family:Arial;}
Multiple----------- th,td {font-weight:bold;padding:7px;}
Descendiente-- div h1 {font-size:80%;margin-left:7px;}
Class--------------.centro {text-align:center;line-height:16px;}
ID------------------- #logo {background-color:blue;color:orange;}

Una regla CSS consta de 2 partes:
Un Selector identifica el elemento o combinación de elementos que se les dará ese formato.
Declaracion: El estilo o formato que se aplicará, consta de 2 partes {propiedad : valor;}

Se pueden especificar muchas propiedades en una declaración , siempre separados por ;

La propiedad indica los apspectos del elemento que vamos a cambiar ( color, Font, Width, Height, border)
El Valor especifica las variables que se usarán para las propiedades.

Hay 3 formas de aplicar el formato CSS a las páginas

Dento del código html (Inline)

<html>
<head>
<title>CSS dentro de código</title>
</head>
<body>
<h1 style=" font-family: Helvetica; color: red;">Titulo</h1>
<p style="font-size: 12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et nibh non sapien tempor faucibus. Duis pretium sollicitudin lectus nec pellentesque. Duis pellentesque mattis nibh, vel convallis ligula. Praesent dapibus blandit quam quis scelerisque. Ut risus justo, porttitor a viverra ac, mattis ultrices magna. Aenean adipiscing rutrum pellentesque. Morbi ipsum ipsum, dictum id eros vitae, semper pulvinar lectus. </p>
</body>
</html>

Incluido de manera interna en un hoja de estilo, (Embeded)

<html>
<head>
<title>Uso Interno CSS</title>
<style type="text/css">
body {
font-family: Verdana;
font-size: 16px;
color: white;
background-color: blue;}
h1 {
color: orange;
font-size:24px;}
</style>
</head>
<body>
<h1>Titulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et nibh non sapien tempor faucibus. Duis pretium sollicitudin lectus nec pellentesque. Duis pellentesque mattis nibh, vel convallis ligula. Praesent dapibus blandit quam quis scelerisque. Ut risus justo, porttitor a viverra ac, mattis ultrices magna. Aenean adipiscing rutrum pellentesque. Morbi ipsum ipsum, dictum id eros vitae, semper pulvinar lectus. </p>
</body>
</html>

<style type="text/css">Se delcara el uso de un estilo, usa el atributo type para identificar que estilos son usados en CSS, cuando se hace un sitio con más de una página se debe optar por usar una Hoja de estilo externa.

Hoja de Estilo CSS externa (external)

<!DOCTYPE html>
<html>
<head>
<title>CSS de manera Externa</title>
<link href="css/estilo.css" type="text/css"
rel="stylesheet" />
</head>
<body>
<h1>Titulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et nibh non sapien tempor faucibus. Duis pretium sollicitudin lectus nec pellentesque. Duis pellentesque mattis nibh, vel convallis ligula. Praesent dapibus blandit quam quis scelerisque. Ut risus justo, porttitor a viverra ac, mattis ultrices magna. Aenean adipiscing rutrum pellentesque. Morbi ipsum ipsum, dictum id eros vitae, semper pulvinar lectus. </p>
</body>
</html>

<link href=Usado en los documentos html para encontrar la ubicación del estilo usado por el archivo CSS, es un elemento vacío(no necesita ser cerrado el atributo) y va dentro del elemento <head>
Tiene e elementos:
href= para especificar la ruta
type Especifica el tipo de documento enlazado y el valor es text/css
rel Especifica la relacion entre la página HTML y al archivo enlazado su valor es stylesheet cuando va enlazado a un archivo CSS

estilo.css
body {
font-family: Arial;
font-size: 14px;
color: yellow;
background-color: black;}
h1 {
color: red;
font-family: Impact;
font-size:20px;}

El uso de hojas externas de estilo nos va dar flexibilidad para dar mantenimiento a nuestro sitio.
Permite que diferentes páginas html usen las mismas reglas en vez de repetirlas por cada página.

lunes, 3 de junio de 2013

Enlaces

Páginas que conservan html antiguo

http://www.cnn.com/EVENTS/1996/year.in.review/

http://www.thebestpageintheuniverse.net/c.cgi?u=index98

http://www.randomhouse.com/features/iamjackiechan/

Página de caracteres especiales (acentos, signos)

http://www.virtualnauta.com/html-caracteres-especiales

Página de Tags html

http://www.htmldog.com/reference/htmltags/

Página de nombres o números hex de colores.

http://www.centerkey.com/colors/

Página de utilidades de fuentes y de libre uso.

http://www.google.com/fonts/

http://www.fontsquirrel.com

http://www.fontex.org

http://www.openfontlibrary.org

Preferencias en TextEdit y Notepad para guardar archivos html

Preferencias TextEdit (Mac)

Poner terminación .htm o .hmtl
(si sale un cuadro de dialogo, "Usar .htm ó .html")

Como guardar Notepad o bloc de notas (Windows)

(en la ventana de guardado Nombre: archivo.html y Tipo: Seleccionar Todos los archivos)

domingo, 2 de junio de 2013

Entregas 1er Parcial

Entregas 10 al 12 de Junio Primer Parcial

1. Cuatro archivos html, cada uno de ellos debe contener al menos un link o enlace al home o index.

Primer archivo html, index.html o home.html debe contener una pequeña biografía tuya no superior a 10 lineas. Y una lista o menú a las otras tres páginas web. Puedes usar colores, imagenes, tablas, etc.
Segundo archivo "nombre que quieras" debe contener al menos 5 imágenes no mayores a 500 pixeles en W / H.
Tercer archivo debe contener texto con 2 headings y una imagen de fondo.
Direccion de correo Electronico o contacto.

domingo, 26 de mayo de 2013

HTML

Elementos HTML
1. Etiquetas
2. Atributos
3. Valores

<!doctype html>
Se tiene que especificar, línea principal del documento HTML

<head>
Representa una colección de metadatos para el documento
<head> Título </head> Información en las hojas de estilo. No se ve la información dentro del Navegador.

Codificado de Caracteres
<meta charset="utf-8">

Descripción de la página web
<meta name = “desripcion”>

Keywords de la página web
<meta name= “keywords”>

<body>
Representa el contenido principal del documento, es el contenido visible
<body>
<p> Esto es lo que se ve </p>
</body>

<body bgcolor="#00aa00" link="#ffff00" vlink="#ffcc33" alink="#ff9900" text="#ffffff">
color="color_name|hex_number|rgb_number"

Colores de background y links se definen en body. Son utilizados el nombre del color en inglés o en números hexadecimales (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) o valores rgb, </body>

Color de texto se define <font color="red">Lo que este aquí adentro es rojo </font>

<body background="images/back.jpg">Con Imagen de Fondo </body>

<title>
El titulo de la página Web, es usado en la barra de los Navegadores, historia, bookmarks o Favoritos en resultados de búsqueda
<title> TITULO DE PAGINA WEB</title>

Headings
<h1></h1> Mayor rango
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>Menor Rango

Parrafos
<p> Esto es un párrafo</p>

Línea
<hr> es un elemento vacío y se puede no cerrar.

Line Break
<br />

Bold
<b> </b>
Strong
<strong> </strong>

Italic
<i> </i>
Enfásis
<em> </em>
Listas
Sin orden
<ul>
<li> cubo</li>
<li> esfera</li>
<li> piramide</li>
</ul>

Ordenada
<ol type= “1”>
<li> cubo</li>
<li> esfera</li>
<li> piramide</li>
</ol>

1 Números décimales
I Números romanos
a Orden alfabético minúsculas
A Orden alfabético mayúsculas

Descriptiva
<dl>
<dt> cubo</dt>
<dd> definición</dd>
<dt> esfera</dt>
<dd> definición</dd>
</dl>

Enlaces
<a> Inserta Vinculos
<a href="http://www.w3.org"> World Wide Web Consortium (W3C)</a>

Vínculos entre páginas del mismo sitio
<ul>
<li> <a href="Index.html"> Inicio</a> </li>
<li> <a href="Nosotros.html"> Nosotros</a> </li>
<li> <a href="Historias Extraordinarias.html"> Historias Extraordinarias</a> </li>
</ul>

Estructura de directorio: <a href="Carpeta/Archivo">

mailto:
<a href="mailto:juanban8@gmail.com"> Inicio</a>

Vínculos en nuevas pestañas
<target="_blank">Nueva ventana o pestaña
<a href="Nosotros.html" target="_blank"> Nosotros</a>

Vinculos dentro de la misma página
<id>Enlace dentro de la misma página
<h1 id="top">Título</h1>
<p>Mucho texto</p>
<a href="#top">Título</a>

<adress>
Utilizado para poner los datos del creador de la página.

Imágenes
<img>
<img src="images/archivo.jpg" alt="Descripción de la imágen" title="Título de la imagen">

Alineacion (tablas, imagenes, objetos, parrafos)
<img src="images/archivo.jpg" align="left">Izquierda
<img src="images/archivo.jpg" align="right">Derecha
<img src="images/archivo.jpg" align="top">Arriba
<img src="images/archivo.jpg" align="middle">Mitad
<img src="images/archivo.jpg" align="bottom">Abajo

Video
<video>
<video src="videos/archivo.mp4" poster="images/archivo.jpg" width="400" height="400"
preload Puede ser auto o none o metada
controls
autoplay
loop>
<p>Un video de prueba</p>
<Video>

Audio
<audio>Enlace dentro de la misma página
<audio src="audios/archivo.mp3" controls autoplay>
<p>Se escucha algo</p>
</audio>

<nav>
Utilizado para enlaces de navegación HTML5

<nav>

<a href="Inicio">Inicio</a>

<a href="Galería">Galería</a>

<a href="Contacto">Contacto</a>

</nav>

<table>
Para crear Tablas

<table>

<div>
Sirve para agrupar un grupo de elementos en un nivel, si se usa el elemento id con CSS se puede definir el estilo de esa división, sirve para localizar secciones de una página

<img src="images/archivo.jpg">
<p>Esta es la parte de arriba</td>
</div> 


Comentarios que no se desplegan en el navegador

TCP/IP
Es un protocolo de comunicación entre aparatos electronicos en internet, define como estos aparatos electrónicos (computadoras, celulares, pads, etc) se conectan a Internet y como los datos deben ser transmitidos entre ellos
Transmission Control Protocol / Internet Protocol

TCP / IP es una combinación de varios portocolos organizados en 4 capas
1. Aplicación: Http, telnet, DNS(Domain Name System),DHCP(Dynamic Host Configuration Protocol)
2. Transporte: TCP, UDP (User Diagram Protocol)
3. Red: IP, ICMP (Internet Control Message Protocol)
4. Enlace: Hardware, Ethernet, Wifi

TCP se hace cargo de la comunicación entre el Navegador y el software de la red
IP se hace cargo de la comunicación entre computadoras.

Cada computadora debe tener una dirección IP antes de conectarse a internet, esta dirección IP es única.

http://whatismyipaddress.com/

Los valores van de 0 a 255 y van separados por un punto Ejemplo: 198.244.15.0

La arquitectura de Red que se utiliza es Cliente / Servidor.

Siendo el Servidor el software que distribuye la información (Apache, Microsoft Internet Information Services IIS) y el Cliente aquel que solicita la información.
En esta arquitectura los equipos no pueden modificar su rol, es decir, un servidor nunca podrá a ser cliente y viceversa.

Domain Name System

Responsable de traducir los nombres de Dominio en Direcciones TCP/ IP

El Nombre de Domino es un nombre único para web

Debe ser Corto, Significativo y Claro
Hay que Registrarlo

Gateway
También conocido como puerta de enlace, es un aparato que tiene un sistema de traducción, manejo e interpretación de varios porotocolos, los cuales van a facilitar la comunicación, y es el administrador de procedimientos entre redes. A diferencia de un Router el Gateway puede manejar varios tipos de protocolos.

Routing
Es un aparato que administra "paquetes de datos" en una red. El router Lee y envia los paquetes de una red a otra dependiendo su destino. El Router intercambia información entre redes paraenviar los paquetes por la ruta mas eficiente.