PHP: Nivel I

Clase 1: Temas

WEB 2.0
HTML

PHP: Nivel I
WEB 2.0

WEB 2.0
Web 1.0 es la Web tradicional que todos conocemos y que se
caracteriza porque el contenido e informacin de un site es
producido por un editor o Webmaster para luego ser
consumido por los visitantes de este sitio web.
Web 1.5: Donde los sistemas de gestin de contenidos (CMS)
servan pginas HTML dinmicas creadas al vuelo desde una
base de datos actualizada.
En el modelo Web 2.0 la informacin y contenidos se producen
directa o indirectamente por los usuarios del sitio Web y
adicionalmente es compartida por varios portales.
por ejemplo:
Blogs
Redes Sociales
Wikipedia
Aplicaciones web, y no solo pginas web.

Comparativo

SEO: Search Engine Optimization

El posicionamiento en buscadores o posicionamiento web (SEO
por sus siglas en ingls, de Search Engine Optimization) es el
proceso de mejorar la visibilidad de un sitio web en los
diferentes buscadores, como Google, Yahoo! o Bing de manera
orgnica, es decir sin pagarle dinero al buscador para tener
acceso a una posicin destacada en los resultados.
Consejos:
Utilizar palabras clave siempre que sea posible en el sitio
web.
No olvidar de colocar el ttulo de la pgina, usar palabras
clave.
La descripcion del contenido META debe ser de 150
caracteres como mximo.
Utilizar las etiquetas de encabezado H1,H2,H3 segn
jerarquia de importancia.

SEO: Search Engine Optimization

Crear el mapa del sitio y el archivo robots.txt
Evitar el uso de archivos flash.
Utilizar hojas de estilo separadas del archivo html.
Respetar la sintaxis HTML, documentos bien formados
( http://www.w3schools.com/ ).
Utilizar las etiquetas ALT para las imgenes.
Utilizar negrita o cursiva en las palabras relevantes.
Evitar el uso de URL dinamicas, por el contrario usar URL
amigables.
En lo posible enlazarlo con redes sociales.
No utilizar texto demasiado pequeo.
..... muchos ms tips.

Apis - Gadgets - Applets

APIS
Una API es una interfaz de programacin de
aplicaciones (del ingls API: Application Programming
Interface). Es un conjunto de rutinas que provee acceso
seguro y oficial a funciones de un determinado software.
En la web, las API's son publicadas por sitios para
brindar la posibilidad de realizar alguna accin o
acceder a alguna caracterstica o contenido de
informacin que el sitio provee. Algunas de las ms
conocidas son las API's de:
Google Search
Flickr
Amazon
Google Maps

Apis - Gadgets - Applets

GADGET
El trmino gadget (o widget), tambin se ha dado a una nueva
categora de mini aplicaciones, diseadas para proveer de
informacin o mejorar una aplicacin o servicios de un
ordenador o computadora, o bien cualquier tipo de interaccin
a travs de Internet, por ejemplo una extensin de alguna
aplicacin de negocios, que nos provea informacin en tiempo
real del estatus del negocio u organizacin.
Gadgets son objetos en miniatura realizados para ofrecer
contenido fresco y dinmico que puede ser colocado en
cualquier pgina en la web.
Gadgets de Google :
Agenda
Gmail
Noticias

Apis - Gadgets - Applets

APPLET
Un applet es un componente de una aplicacin que se ejecuta en el
contexto de otro programa, por ejemplo un navegador web. El applet
debe ejecutarse en un contenedor, que lo proporciona un programa
anfitrin, mediante un plugin, o en aplicaciones como telfonos
mviles que soportan el modelo de programacin por 'applets'.
A diferencia de un programa, un applet no puede ejecutarse de
manera independiente.
Un Java applet es un cdigo JAVA que carece de un mtodo main, por
eso se utiliza principalmente para el trabajo de pginas web, ya que es
un pequeo programa que es utilizado en una pgina HTML y
representado por una pequea pantalla grfica dentro de sta.
Por otra parte, la diferencia entre una aplicacin JAVA y un applet
radica en cmo se ejecutan. Para cargar una aplicacin JAVA se
utiliza el intrprete de JAVA. En cambio, un applet se puede cargar y
ejecutar desde cualquier explorador que soporte JAVA.

PHP: Nivel I
HTML
HyperText Markup Language
Lenguaje de Marcado de Hipertexto

http://www.w3schools.com

HTML
HTML es el lenguaje con el que se definen las pginas web.
Bsicamente se trata de un conjunto de etiquetas que sirven
para definir el texto y otros elementos que compondrn una
pgina web.
Los Browsers o Navegadores interpretan perfectamente el
cdigo HTML, de alli que en la actualidad se tenga gran
acogida por las aplicaciones web.
HTML se escribe en forma de etiquetas, rodeadas por
corchetes angulares (<,>).
HTML tambin puede describir, hasta un cierto punto, la
apariencia de un documento, y puede incluir un script (por
ejemplo Javascript), el cual puede afectar el
comportamiento de navegadores web y otros procesadores
de HTML.

Estructura Bsica

1. HTML : DOCTYPE
El estndar XHTML deriva de XML, por lo que comparte con el
muchas de sus normas y sintaxis. Uno de los conceptos
fundamentales de XML es la utilizacin del DTD o Document Type
Definition ("Definicin del Tipo de Documento").
La DTD es la estructura reglamentaria, es decir, los elementos y
atributos que estn disponibles para cada tipo de documento.
Para HTML 4.01 (las versiones anteriores no son recomendables
debido a que no son del todo compatibles con las Hojas de Estilo),
existen 3 tipos de DTD:

Strict

Transitional

FrameSet

HTML STRICT
Exigen el cumplimiento estricto de las etiquetas HTML 4.0.1,
siendo interpretado por todos los navegadores.
Se exige la separacin del html y los css.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML TRANSITION
El HTML 4 transitorio incluye todos los elementos y cualidades
de HTML 4 Strict pero agrega cualidades para elementos
desaprobados o elementos obsoletos. Se llama Transitional
porque est pensado como transicin hacia HTML 4 estricto.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML FRAMESET
Esta es una variante de HTML 4 transitorio para los
documentos que utilizan Frames (marcos).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML : CANVAS
Canvas es uno de los componentes ms novedosos de
estndar HTML 5 que sirve para dibujar dinmicamente
imgenes en una pgina web.
El elemento canvas permite especificar un rea de la
pgina donde se puede, a travs de scripts, dibujar y
renderizar imgenes, lo que ampla notablemente las
posibilidades de las pginas dinmicas y permite hacer
cosas que hasta ahora estaban reservadas a los
desarrolladores en Flash, con la ventaja que para usar
canvas no ser necesario ningn plugin en el navegador, lo
que mejorar la disponibilidad de esta nueva aplicacin.
Ejemplos:
http://www.benjoffe.com/code/demos/canvascape/
http://www.benjoffe.com/code/demos/canvascape/textures

CANVAS : Compatibilidad
El canvas se desarroll inicialmente por Apple para su
navegador Safari y luego fue utilizado y estandarizado por
la organizacin WHATWG para incorporarlo a HTML 5.
Posteriormente tambin ha sido adoptado por navegadores
como Firefox y Opera.
Por lo que respecta a Chorme, es un navegador que utiliza
el mismo motor de renderizado que Safari, por lo que
tambin soporta el elemento Canvas.
Internet Explorer 8, no soporta canvas con funciones
nativas, pero existen diversos proyectos y plugins que
pueden ampliar las funcionalidades del navegador para dar
soporte a este nuevo elemento del HTML 5. Por ejemplo,
existe el proyecto Explorer Canvas en el que se ha
preparado un plugin para que Explorer soporte el dibujo 2d
que permite canvas.

2. HTML : HEAD
El tag "head" define un bloque donde los autores pueden
declarar informacin acerca del documento, como el ttulo,
descripcin, palabras claves, etc.
Es decir toda la informacin que necesita el navegador, el
servidor de web y los motores de bsqueda
Adicionalmente se agregan referencias a estilos (*.css) y
scripts( *.js)

3. HTML : BODY
El cuerpo esta delimitado por las etiquetas <body>....
</body> siendo habitualmente lo ms importante en un
documento HTML.
Aqu debemos de colocar los elementos que componen
nuestra pgina como por ejemplo: el texto, imgenes, etc.

FORMULARIOS

FORMULARIOS
Los formularios son una caracterstica del estndar HTML que permite a
los autores recolectar informacin proporcionada por los visitantes.
Elementos de entrada:
Entrada de Texto (input)
Entrada de Texto oculta (hidden)
Entrada de Contrasea (password)
Entrada de mltiples lneas (textarea)
Opciones:
Casillas de Verificacin (check)
Botones de radio (radio)
Listas (select)
Botones:
Botones de envo (submit)
Botones de restablecimiento (reset)
Botones de Imagen
Botones de contenido
Archivos
Upload file (file)
Agrupar controles
Contenedor (fieldset)

Propiedades
Un formulario define 3 propiedades muy importantes:
Name: Nombre que se le asigna al formulario,
generalmente se usa en funciones javascript.
Method: Forma de enviar los datos POST / GET.
Action: Destino de los datos, es decir la pagina que los
recibe, que puede estar localmente (localhost) o en un
servidor a distancia (http:// )

Controles
Cajas de texto
Permiten el ingreso de datos por parte del visitante.
Puede ser de 3 tipos:
Ingreso de texto : <input type=text
Ingreso de texto oculto: <input type=hidden
Ingreso de password: <input type=password
Ingreso de mltiples lineas: <textarea name=abc
rows=2 columns=10>texto prueba</textarea>
El nombre de la caja de texto, nos permitir recuperar los
datos, luego del envo de informacin.

Opciones:
Permitir a los visitantes escoger opciones preestablecidas de
una lista. Esto puede ser logrado usando uno de los tres
controles siguientes:
Casillas de verificacin: checkbox
Botones de radio: radio
Lista de seleccin: select
Botones
Botones de envo:
<input type=submit
Botones de reset
<input type=reset ..