lunes, 16 de enero de 2017

Comandos de HTML

DESCRIPCIONINICIOFINALCOMENTARIOS
Obligatorias
Principio de Documento<html></html>Toda la codificación debe estar incluida en estas etiquetas
Encabezado<head></head>Dentro del encabezado se encontrará el título.
Título<title></title>Es el texto que aparece en la barra de títulos del navegador
Cuerpo<body></body>Cuerpo de la página
Para toda la página
Color de Fondo<body bgcolor="#RRVVAA">



Permite colocar un color uniforme de fondo a toda la página. Este color estará formado por 3 números hexadecimales que indiquen:
RR = tonalidad de color rojo
VV = tonalidad del color verde
AA = tonalidad del color azul
Imagen de Fondo<body background="nombreimagen.gif">nombreimagen.gifdeberá reemplazarse por el nombre de la imagen. Se recomienda utilizar formatos .gif o .jpg
Colores de texto color de enlaces
enlaces visitados
<body text="#RRVVAA"
Link ="#RRVVAA"
Vlink ="#RRVVAA"
Alink ="#RRVVAA"
Permite definir los colores que se aplicarán en forma genérica para el texto como para los enlaces. El color está representado por un número hexadecimal
Estilos <style></style>Permite definir un estilo de fuente, color, tamaño, etc para todo el documento.
Meta<meta
name="description" content="comentarios"
name="keywords" content="palabra1 palabra2 ... palabran">
</meta>Permite definir propiedades internas del documento.
Name = "description" content = ”Será el resumen con que se publicará en el buscador. No utilizar más de 25 palabras"
Name = "keywords" con­tent = "podrán definirse palabras claves para que nuestro documento sea encontrado por los buscadores"
Sonido<bgsound
src="xx.wav"
loop=infinite/n>
<embed

src="xx.wav"
width=200 height=55
autostart="true"
loop="true"
hidden="true"> 
Ejecuta un archivo de sonido.
xx.wav se debe reemplazar por el nombre del archivo; loop nindica la cantidad de veces que se repetirá.
La etiqueta Embed con sus propiedades, se utiliza por las incompatibilidades de los navegadores.
Con esta opción aparece una consola cuyas di­mensiones se definen con WidthHeight y que puede ocultarse con Hidden  = "true"
Presentación de texto
Encabezamientos<h1><h2>....<h6></h1></h2>....</h6> Opciones de formato de texto para encabezados,
Negrita
Cursiva
Subrayado
<b>
<i>
<u>
</b>
</i>
</u>
Coloca el texto incluido con éstos formatos.
Parpadeo<blink></blink>El texto estará parpadeante
Grande
Pequeña
<big>
<small>
</big>
</small>
Agranda el texto
Disminuye el texto
Subíndice
 Superíndice
<sub>
<sup>
</sub>
</sup>
Representa el texto sobre el renglón o bajo el renglón.
Color del Texto <font color="#RRVVAA"></font>Permite colocar un color a la fuente. El color está representado por un número hexadecimal.
Tamaño del Texto <font size="n"></font>Define un tamaño de fuente específico. nrepre-senta un número del 0 al 7 al que luego podrán agregarle los signos + o -
Tipo de fuente<font face="nombre de fuente"></font>Permite definir un nombre de Fuente específico.
Estilo de fuente<tt></tt>Formato de fuente Courier de tamaño menor (Typewriter)
Texto preformateado<pre></pre>Formato de fuente tipo Courier. Se representan los espacios en blanco
Texto en Movimiento<marquee>(texto)</marquee>Permite que un texto tenga movimiento. Pueden agregarse atributos para dimensionar la marquesina, para alinear el texto, para modificar tamaño, fuente y color.
Línea Horizontal<hr="n"> No utiliza etiqueta de cierreTraza un línea horizontal cuyo grosor está representado por “n”
Espacio en Blanco&nbsp No utiliza etiqueta de cierreRepresenta un espacio en blanco.
Comentario<!- comentario> ->Comentarios que no serán visibles en la pantalla.
Caracteres especiales
EscriboPara ver
&lt;
&gt;
&amp;&
&quot;"
&aacute;á
&eacute;é
&iacuteí
&oacute;ó
&uacute;ú
&Aacute;Á
&Eacute;É
&Iacute;Í
&Oacute;Ó
&Uacute;Ú
&ntilde;ñ
&Ntilde;Ñ
&uuml;ü
&Uuml;Ü
&#191;¿
&#161;¡
Permiten que los caracteres especiales sean leídos por todos los navegadores en sus distintas versiones.

La escritura de cada carácter comienza con el signo ampersand (&) y debe terminar con punto y coma (;)

En esta tabla vemos como escribir algunos símbolos, signos, las letras Ñ y ñ, y las vocales acentuadas en mayúscula y minúscula.
Presentación de párrafos
Alineaciones<center>
<left>
<right>
</center>
</left>
</right>
Todo texto que se escriba entre estas etiquetas sufrirá esa alineación .
Sangría<blockquote></blockquote>Se utiliza para destacar una cita.
Parrafo
<p align= center*left*right*justify>

</p>
Realiza la separación entre párrafos, y la alineación de estos.
Renglones en blanco<br>Permite dejar renglones en blanco
Tratamiento de imágenes
Imagen Individual<img src="nombreimagen.gif">Permite insertar una imagen en la página que estamos diseñando. El archivo de la imagen deberá estar ubicado en la misma carpeta que la página, caso contrario se deberá indicar su ruta de acceso
Texto de la imagen<img src="nombreimagen.gif" alt="texto">Coloca un texto que po­drá leerse al pasar el puntero del ratón sobre la imagen o cuando ésta no se carga.
Alineación del texto<img src="nombreimagen.gif"
align= top * middle * bottom>
Indicará la posición en que ubicaremos al texto que acompaña a la imagen
Top Arriba *Middle Medio *Bottom Abajo
Ancho
Alto
<img src="nombreimagen.gif"
width="n"
height="n">
Define el tamaño de la imagen
Width = ancho * height = altura = será un valor en pixeles
Videos<img dynsrc="archivi.avi"
loop=infinite controls
start= mouseover>
Permite agregar archivos de video.
Listas
Lista numerada<ol type= A * a * I * i start=n>
<lh> título de la lista </lh>
<li> Primera opción
<li> Segunda opción
<li> Tercera opción 
</ol>Se utiliza cuando las opciones deben ser numerados. La opción typerepresentan número o letras ystart indicará el número con que inicia.
Lista no ordenada<ul type=square * circle * disk>
<lh> título de la lista </lh>
<li> Primera opción
<li> Segunda opción
<li> Tercera opción 
</ul>Se utiliza cuando las opciones no presentan un orden determinado. La opción typerepresenta la viñeta.
Lista con sangrado<dl>
<lh> título de la lista </lh>
<dt> Primer tema
    <dd> Primer detalle
    <dd> Segundo detalle
<dt> Segundo tema
    <dd> Tercer detalle
    <dd> Cuarto detalle 
</dl>Se utiliza cuando las opciones llevan un título y una definición
Enlaces o Links
Enlace a otro URL<a href="xxx"> yyy</a>xxx se debe reemplazar por la dirección URL destino del enlace.
yyy es el texto indicativo que se leerá en la página. 
Enlace a un
e-mail
<a href = "mailto:dirección e-mail"> texto indicativo del enlace </a>Te permite un enlace directo a tu cliente de correo predeterminado
Marca para enlace dentro de la misma página
(Ancla - Anchor)
<a href="#marca"> Texto de enlace al ancla</a>Referencia una posición a la que luego se accederá.
Localizar enlace anterior<a name="marca"> texto del ancla</a>Enlaza una posición previamente marcada, dentro de la misma página 
Enlace a otra página con marca, dentro del mismo sitio<a href="ab.htm#marca"> texto indicativo del enlace</a>Enlaza a la posición establecida en marca, en la página ab.htm
Enlace con imagenes<a href="xxx"><img src="nombreimagen.gif"></a>xxx se debe reemplazar por la dirección URL destino del enlace.
nombreimagen.gifse debe reemplazar por el nombre de imagen seleccionado
Enlaza a la dirección URL haciendo un click sobre la imagen.
Tablas
Definición <table></table>Crea una tabla
Bordes 
Color de Bordes
<table border=n bordercolor="#RRVVAA">

= representa al grosor del borde. También se podrá especificar el color del borde 
Separación entre celdas <table cellspacing=n>Las celdas podrán sepa­rarse por el nvalor
Separación entre el borde y el contenido <table cellpadding=n>El contenido podrá estar separado del borde por el valor indicado en n
Alto
ancho
<table height=n o porcentaje
width=n o porcentaje>
Se puede establecer un valor o un porcentaje para definir el tamaño de la tabla
Color de Fondo o
Imagen de Fondo
<table bgcolor="#RRVVAA" background="imagen.gif">

Se puede establecer un color de fondo de toda la tabla o colocar una imagen de fondo
Título<caption
align=top * bottom> texto del título
</caption>Posibilita colocar un título a la tabla alineadotop=arriba obottom=abajo
Definición de filas<tr
align=left*center*right valign=top*middle*bottom bgcolor="#RRVVAA"> 
</tr>Por cada fila que tenga la tabla deberá utilizarse esta etiqueta: se podrá establecer la alineación del contenido, la ubicación dentro de la fila y el color de fondo.
Definición de títulos<th align=left*center*right*justify*decimal valign=top*middle*bottom*baseline bgcolor="#RRVVAA"> </th> Permite definir los nom­bres de las columnas.
Definición de datos o contenidos<td align=left*center*right*justify*decimal valign=top*middle*bottom*baseline bgcolor="#RRVVAA"> </td>Coloca contenidos a cada celda
Celda que ocupa muchas filas<td rowspan=numero de filas> </td>Se puede combinar una celda para que ocupe muchas filas.
Celda que ocupa muchas columnas<td colspan=numero de columnas> </td> Se puede combinar una celda para que ocupe muchas columnas.
Formularios
Definición<form>Inicia un formulario. Se utiliza para la entrada o el envío de datos.
Acciones<form action="mailto:direccion@email"
method=post enctype="text/plain">Texto referente
Envía la respuesta inmediatamente a la dirección especificada en formato de texto.
Introducción de datos<input
type="text"
name="nombre del campo formulario"
value="asignación de un dato"
size="número"
maxlenght="número">
Ingresa un objeto dentro del formulario, se deberá definir el tipo de objeto, el nombre del campo formulario, el valor inicial que se le asigna, el tamaño máximo de visualización del campo y el tamaño máximo de caracteres que puede tener ese campo.
Con el type = "text" no se asigna Value
Opciones de
type
button
checkbox
file
hidden
image
password
radio
reset
submit
text
checkbox = se visualiza un cuadro de verificación, si deseamos que aparezca tildado agregamos CHECKED.
password = el ingreso se representa con asteriscos.
radio = visualiza botones de radio y permite que el usuario elija una opción entre varias. Se agregan tantos input como opcio­nes deseamos.
reset = visualiza un botón que al hacerle click borrará los datos.
submit
 = visualiza un botón que al hacerle click enviará los datos.
text = crea un campo para ingresar caracteres alfa­numéricos
Ingreso de un texto que ocupa muchas líneas<textarea
name="nombre del campo formulario"
rows="cantidad de filas"
cols="cantidad de columnas">
</textarea>Permite ingresar un texto extenso, por ejemplo comentarios
Ingreso por medio de un menú<select name="nombre del campo formulario">
<option>1º opción
<option>2º opción
<option>3º opción
</select>Permite optar por los datos de un menú
Frames o Marcos
Definición<frameset></frameset>Inicia la definición de un frame.
Frames en columnas
Frame en filas
<frameset cols="20%,80%">
<frameset rows="30%,70%>
Define dos frame en co­lumnas ocupando uno el 20% de la pantalla y el otro el 80% restante.
Define dos frame en filas ocupando una el 30% de la pantalla y la otra el 70% restante
Contenido de cada frame<frame src="frame1.htm">
<frame src="frame2.htm" name="principal">
Define en que frame se cargará cada página.
Se asignará unname en este casoprincipal para indicar que se visualicen allí los futuros enlaces
Destino del frametarget="principal"Se utiliza como atributo de un enlace e indica en que frame deberá visualizarse ese enlace.
"_ blank" = se abrirá una nueva ventanadel nave­gador y se visualizará en ella.
"_self" = el enlace se carga en el propio frame.
"_top" = el enlace se carga a pantalla completa en la misma ventana, suprimiendo los otros frame.
Atributos del tag frameset
border=0
frameborder=0
framespacing=0
Border = 0 indica que no habrá huecos de separación entre frames (para Netscape). 
frameborder = 0
indica que no habrá borde de separación entre frames.
framespacing = 0indica que no habrá huecos de separación entre frames (para Explorer).
Atributos del tag frameframeborder="no"
marginheight="número"
marginwidth="número"
name="nombre del frame"
noresize
scrolling="yes/no/auto"
src="dirección.htm"
Frameborder =elimina los bordes de un frame
marginwidth
 ymargin­height = definen el ancho y alto de los margenes del frame.
name = define el nombre del frame.

Noresize = indica que el fram no podrá redimen­sionarse.
scrolling = inidca si tendrá o no barra de desplaza­miento.
src = indica el contenido del frame.
Si el frame no puede visualizarse<noframes>






</noframes>Si el navegador no cuenta con la posibilidad de incluir Frames, con este tag puede definirse una dirección alternativa. Se coloca luego de los tag FRAME y llevan dentro un texto definifo entre los tag <body> </body>

martes, 13 de diciembre de 2016

Introducción a la programación de HTML

Fecha 12/13 de diciembre 2016

Resultado de imagen para htmlIntroducción a la programación de HTML


HYPERTEXT MARKUP LANGUAGE


En esta evolución se observó un avance y actualmente hay un punto de intersección. Hay un lenguaje que está fuera de un estándar, hay navegadores como Opera que le apuestan para que el HTML sea más coherente pero Microsoft quiere que se maneje otro lenguaje aparte del HTML 5.

Hay una industria interna que hacen que las descargas, los contenidos sean más eficientes. En la actualidad se ha desarrollado la interactividad que es la capacidad de un sistema para entablar una comunicación con un servidor. El HTML no puede lograr solo esta interactividad y necesita otros lenguajes para funcionar como por ejemplo ASP (Active Server Pages) su creador Microsoft, este fue un lenguaje muy promovido por los programadores ya que era el primero en permitir la interactividad en una página web por ejemplo preguntar y ser respondido, pero cuando aumentaban los usuarios el desempeño de la máquina servidor se hacía lenta y no tenía el desempeño necesario para cubrir las necesidades al cien por ciento, también se creó el lenguaje .net este forma parte de una programación como Visual studio y estos crean BSSAP. Afortunadamente, se crea JAVA y JAVASCRIPT es el lenguaje que te permite trabajar con bases de datos y con transacciones bancarias, este lenguaje pertenece a Oracle. JAVA hacia operaciones bancarias. El problema de JAVA era que necesitaba bucles.
Resultado de imagen para html
JAVASCRIPT usaba un sistema de lenguaje un tanto complicada y difícil para programar.

El lenguaje PHP (Pre Hypertext) lo que hace es colocarse antes del lenguaje HTML. Es un lenguaje complicado pero hace que no se cometan tantos errores como en los lenguajes anteriores. Cabe mencionar que este lenguaje es un tanto repetitivo.

En la antigüedad se podía utilizar el lenguaje HTML con aplicaciones de texto. Es un estilo lineal, se sigue hasta iniciar y finalizar.


El CSS (Cascading Style Sheets), esta programación es necesaria para el HTML. En el pasado se tenía que crear página tras página con el mismo diseño, pero lo que se hizo fue que el CSS únicamente modifica los estilos y no el formato.


EL SQL (Structured Query Language) este fomenta la interactividad.

Ahora con la presencia del BBS era una consulta a artículos de información y se representaba como un chat en u folleto. Abarcaba temas totalmente dedicados a la investigación científica.

En 1995 se crea una parteaguas que engaña a las personas y con esto se podía saber cuanta memoria tiene, cuánta energía necesitaba con el único fin de crear una cuestión gráfica en un sistema operativo antiguo.

Con Explorer se lograba colocar a una computadora con el acceso a internet, esto abrió la posibilidad de abrir las puertas al internet.

ISP (Internet Service Provider): La gente de México tenía que recurrir a esta empresa para poder tener acceso a internet. Y el servicio era muy lento y muy caro.
Los negocios en internet comenzaron con muchas expectativas y terminaron con una gran decepción.

La W3C (World Wide Web Consortium) es un consorcio internacional que genera recomendaciones y estándares que aseguran el crecimiento de la WWW (World Wide Web) a largo plazo. Lo que hace es estandarizar el uso y el empleo de HTML. Ya que con esto se arreglaron muchos problemas, con los elementos que se emplearon lograron muchas mejoras. 

IETF ( Internet Engineering Task Force), junto con W3C sacan adelante la estandarización. 

Con la estandarización nace el HTML 3 y después el 4 (Aproximadamente en 1995)

Todos ellos cuidaron el sistema de programación y los elementos que se generaban dentro del lenguaje que al final de cuentas funcionaba. Este lenguaje era perfectible, tendía a ser mucho mejor pero los intentos chocan mucho con la comercialización. 

Microsoft crea otro lenguaje XHTML ( eXtensible Hypertext Markup Languaje)  esto hacía que los programas como Word pudieran interactuar con páginas Web. Esto hace que el HTML pierda interés en este tipo de lenguaje, otras empresas no lo vieron como algo tan recomendable para sus navegadores  ya que se dan cuenta que el lenguaje se va a privatizar y no le conviene. 

Por lo tanto esas empresas deciden crear otro organismo el WHATWG ( Web Hypertext Application Technology Working Group) quieren perfeccionar el HTML. 

Los Hipster llevan la idea que todo lo que está en internet debe ser gratuito para todos y todos los contenidos deben de ser conocidos por todos. 

El Open Source, declara que todo como se hizo y con que se hizo, se debe colocar el código para poderlo copiar y modificar. 

Youtube es una plataforma que codifica a los videos lo que hace que cada video sea ligero y no ocupe mucho espacio en la Web.

Los cambios siempre han sido en beneficio, el cambio más actual es la renovación del HTML 5, lo que significa que es el lenguaje HTML pero modificado. Lo que trae de nuevo el HTML 5 es un cambio estructural lo que permite que el trabajo lo haga el usuario y no el ordenador, debido a la nueva forma de trabajar con el lenguaje, este trabajo que lo hacía el servidor ahora lo hace la máquina del usuaria. Estructuralmente la parte de lectura es más fluida para el servidor. El HTML 5 es muy revolucionario pero fue muy difícil para usar ya que propiciaba que el servidor se descargaba de trabajo pero el usuario requería máquinas más potentes con un nivel de procesamiento más avanzados. Y también requirió mucho dinero, para comprar un nuevo servidor ya que tenías que comprar una buena computadora.
En la actualidad la mayoría de los programas ya son virtuales, el usuario ya no se tenía que preocupar por tanto trabajo. También se eliminaron los CD y esto hace que ya no sea tan pesado el ordenador.

Los avances tecnológicos han hecho bien, el problema es que aveces no se puede pagar los servicios ofrecidos porque son muy caros.





lunes, 5 de diciembre de 2016

Topologías





Bus: Esta topología permite que todas las estaciones reciban la información que se transmite, una estación transmite y todas las restantes escuchan. Consiste en un cable con un terminador en cada extremo del que se cuelgan todos los elementos de una red. Todos los nodos de la red están unidos a este cable: el cual recibe el nombre de "Backbone Cable". 

Anillo: Las estaciones están unidas unas con otras formando un círculo por medio de un cable común. El último nodo de la cadena se conecta al primero cerrando el anillo. Las señales circulan en un solo sentido alrededor del círculo, regenerandose en cada nodo. Con esta metodología , cada nodo examina la información que es enviada a través del anillo. Si la información no está dirigida al nodo que la examina, la pasa al siguiente en el anillo. La desventaja del anillo es que si se rompe una conexión, se cae la red completa.
Para ver el gráfico seleccione la opción "Descargar" del menú superior

Resultado de imagen para topologias
Estrella: Los datos en estas redes fluyen del emisor hasta el concentrador, este realiza todas las funciones de la red, además actúa como amplificador de los datos.
La red se une en un único punto, normalmente con un panel de control centralizado, como un concentrador de cableado. Los bloques de información son dirigidos a través del panel de control central hacia sus destinos. Este esquema tiene una ventaja al tener un panel de control que monitorea el tráfico y evita las colisiones y una conexión interrumpida no afecta al resto de la red.

Árbol: Esta estructura se utiliza en aplicaciones de televisión por cable, sobre la cual podrían basarse las futuras estructuras de redes que alcancen los hogares. También se ha utilizado en aplicaciones de redes locales analógicas de banda ancha.