28/11/2014

NewsAxtroApps

HTML5introducenuevoselementos"inline"muytilesparaaumentarnuestroexistentearsenalde"span,strong,em,abbr,etc".Apartirdeahoraaestoselementos
yanoselesllamar"inline",sinotextlevelsemantics.
mark
Cuandorevisamosunlistadodeunabsquedaenunaweb,usualmentevemoseltrminoporelquehemosbuscadoiluminadooresaltadodentrodecadaresultado.
Porlogeneralsemarcacadainstanciadeltrminodebsquedaconunelementospan,perospandesdeunpuntodevistasemntico,sequedaunpococojo,yaque
realmentesirveparapocomsqueaplicarleunaclaseespecficaaunelementodentrodeunestiloyadefinido.
Sepodrautilizaremostrongperosemnticamentenoseracorrectoyaquenoquerrasotorgarleunaimportanciaaltrminodebsqueda,simplementequeremos
quedealgunamaneraquederesaltado.
Introduzcamoselelementomark:
<h1>Resultadodebsquedapara'unicornio'</h1>
<ol>
<li>
<ahref="http://www.3sellers.com/">LeyendoelGran<mark>unicornio</mark>azul.</a>
</li>
</ol>
Elelementomarknollevaimplcitoningunaimportanciaparaelcontenidosalvoelmostrarlocomoalgodeintersenelcontextoenqueest.Segnla
especificacin,markdenotafragmentodetextodeundocumentomarcadooiluminadoconfinesdereferenciadebidoasuimportanciaenotrocontexto.
meter
Elelementometerpuedeserutilizadoparamarcarmedidas,siemprequeesasmedidasseanpartedeunaescalaconvaloresmnimosymximos.
<meter>9de10gatos</meter>
Noesobligatorioescribirelvalormximosinoquiere,paraesosepuedeutilizarelatributomax.
<metermax="10">9gatos</meter>
Existeunatributomincorrespondiente.Tambinsepuedeutilizarlosatributoshigh,low,yoptimum.Silodesea,puedeinclusoocultarlamedicindentrodel
atribulovalue.
<meterlow="273"high="100"min="12"max="30"optimum="21"value="25">Hacebastantecalorenestapocadelao.</meter>
progress
Mientraselelementometeresmuybuenoparadescribiralgoqueyahasidomedido.Elelementoprogresstepermitemarcarunvalorqueestenprocesode
cambio.
Superfilest<progress>60%</progress>completado.
Otravezsepuedenutilizarlosatributosmin,max,yvalue:
<progressmin="0"max="100"value="60"></progress>
ElelementoprogressesmstilcuandoseutilizacombinadoconDOMScripting.SepuedeutilizarJavaScriptparaactualizacionesdinmicasdelvalor,
permitiendoalnavegadorcomunicarelcambioalusuario.MuytilparacargararchivosconAjax.
Estructura
HTML5presentaunaestructurabasadaenlaexperienciadelosdesarrolladoresdeHTMLyCSS.Trashabervaloradounmillndepginasyhabertabuladolos
nombresmscomunesqueseleasignaaloselementosclass,nombrescomoheader,footerynavprevalecieron.
section
Elelementosectionesusadoparaagruparportemascontenidorelacionado.Esosuenamuysimilaralelementodiv,quesueleutilizarsecomocontenedorde
contenidogenrico.Ladiferenciaesquedivnotienesentidoenlasemnticanotedicenadasobreelcontenidoquellevadentro.Elelementosection,porotra
parte,seutilizadeformaexplcitaparaagruparcontenidorelacionado.
Ustedpodrasustituiraalgunosdesuselementosdivconelementossection,perorecuerdesiemprepreguntarseEsttodoelcontenidorelacionado?
<section>
<h1>Avedelparaso</h1>
<p>Narrativapolicacaydeintriga/Novelanegra.</p>
<p>CAROLJOICE</p>
</section>
header
EspecialistasenHTML5describenalelementoheadercomouncontenedordeagroupofintroductoryornavigationalaids",quevienesiendoalgocomo:
elementosquesirvencomointroduccinoelementoparalanavegacin.Esosuenarazonable.Eseeseltipodecontenidoqueyoesperaraencontrarenun
encabezado,yeninglslapalabra"header"seutilizaamenudocomosinnimodecabecera(masthead).
ExisteunadiferenciacrucialentreelelementoheaderenHTML5yelusoaceptadoygeneralizadodelapalabraencabezadoocabecera.Porlogeneralenuna
pginaexisteunasolacabeceraperoundocumentopuedetenermltiplesencabezados,oloqueseralomismomltipleelementosheader.Sepuedeutilizarun
elementoheaderdentrodeunelementosectionporejemplo.Lasespecificacionesdescribenloselementossectioncomoathematicgroupingofcontent,typically
withaheading,osea,unaagrupacintemticadecontenido,generalmenteconunencabezado.
<section>
<header>
<h1>Avedelparaso</h1>
</header>
<p>Narrativapolicacaydeintriga/Novelanegra.</p>
<p>CAROLJOICE</p>
</section>
http://www.axtro.es/blogs/41602/noticias?tag=HTML/CSS

2/18

28/11/2014

NewsAxtroApps

Elelementoheaderaparecerporlogeneralenlapartesuperiordeundocumentoosection,notienequeserasobligatoriamente.Hasidodefinidoporsucontenido
introductoriooelementoparalanavegacinseacualseasuposicin.
footer
Comoelelementoheader,footer(pie)suenacomosudescripcinyubicacin.Encambio,elelementofooterdebercontenerinformacinsobresuselementosde
contenido:quienloescribi,informacindecopyright,enlacesacontenidorelacionado,etc.
Mientrasestamosacostumbradosatenerunpieparatodoundocumento,HTML5nospermitetambintienenpiesdentrodelassecciones.
<section>
<header>
<h1>Avedelparaso</h1>
</header>
<p>Narrativapolicacaydeintriga/Novelanegra.</p>
<footer>
<p>CAROLJOICE</p>
</footer>
</section>
Readmore...

TutorialHTML5Browsersydoctype
20Aug2011Tags:Html/css,
EscritoporAlejandroCastillo6
EL!DOCTYPE(DocumentTypeDeclaration)esusadotradicionalmenteparaespecificaralosnavegadoresellenguajey/oversinconelqueestescritoun
documentoHTML.
EldoctypeparaHTML4.01tienelasiguienteapariencia:
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
EsteeseldoctypeparaXHTML1.0:
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
Noestnescritosenlenguaje"humano"perosimplementevienenadeciralgoas:estedocumentohasidoescritoenHTML4.01oestedocumentohasidoescrito
enXHTML1.0.
SepodraesperarqueparaHTML5ladeclaracindeldoctypefueraestedocumentohasidoescritoenHTML5deberatenerunnmero5enalgnsitio,puesno,
eldoctypeparaHTML5quedaraas:
<!DOCTYPEhtml>
Cuandolovemosporprimeraveznospuederesultarraronoencontrarunnmerodeversin,ysobretodo,cmoseespecificarnfuturasversionesdeHTML?
Realmentepiensanqueestaserladefinitiva?
Detengmonosapensarloporunmomento,eldoctypedeHTML5esmuypragmtico.DebemostenerencuentaqueunadelaspremisasdeHTML5esquetiene
quesoportarelcontenidoexistente,eldoctypedeHTML5deberpoderseaplicaradocumentosyaescritosenHTML4.01oXHTML1.Lasfuturasversionesde
HTMLdeberntambinsoportarelcontenidoenHTML5,porloqueponerleunnmeronoseralomsconveniente.
Laverdadesqueeldoctypenoeslomsimportante.SupongamosquetenemosundocumentoconundoctypeparaHTML4.01.Siesedocumentocontiene
elementosdeotrasespecificaciones,comoHTML3.2oHTML5,elnavegadormostraresapartedeldocumento.Losnavegadoressoportanfuncionalidadesno
doctypes.

HTML5Simplificando
EldoctypenoeslanicacosaquesehasimplificadoenHTML5.
Siustedquiereespecificarlacodificacindecaracteresdelmarcadodeundocumento,lamejorformaesasegurarnosqueelservidorenvaencorrectoContentType
delheader.Siquiereestardoblementeseguropuedeespecificarloscaracteresutilizandolaetiqueta<meta>.Aqupodemosvercmoseutilizalaetiquetametapara
undocumentoescritoenHTML4.01:
<metahttpequiv="ContentType"content="text/htmlcharset=UTF8">
AsseraenHTML5:
<metacharset="UTF8">
Laetiqueta<script>tambinsufrialgunassimplificaciones.Escomnaadirunatributotypeconelvalordetext/javascriptaloselementosscript:
<scripttype="text/javascript"src="file.js"></script>
Losnavegadoresnonecesitaseseatributo.EllosasumenqueesscriptestescritoenJavaScript,ellenguajedeprogramacinmspopularthemostpopularenla
web.
<scriptsrc="file.js"></script>
Delamismamaneranoesnecesarioespecificarelvalortypedetext/csscadavezqueseenlazaaunficheroCSS:
<linkrel="stylesheet"type="text/css"href="file.css">
Simplementeseescribe:
<linkrel="stylesheet"href="file.css">
http://www.axtro.es/blogs/41602/noticias?tag=HTML/CSS

3/18

28/11/2014

NewsAxtroApps

EstassonalgunasdelascaractersticasdeHTML5,prximamenteseguiremospresentndolo.
Readmore...

CreafondosdegradadosconCSS3
17Aug2011Tags:Html/css,
EscritoporJuanCarlosRodrguez3
LatcnicadecreacindedegradadoquevamosaverslofuncionaenMozillayWebkit.ParavariarInternetExplorertodavanodasoporteaestaopcindeCSS3,
peroconeltiempo(mstardequetemprano)estaopcinsercompatiblecontodoslosnavegadores.
AdiferenciadeotrasopcionesdeCSS3,enestaocasinlasintxisdeMozillaySafari/Chromeparalosdegradadosdifiereunpoquito.Asquevamosavercomo
hacerloprimeroconMozillayluegoconWebkit.

Mozilla
LasintxisparaFirefoxeslasiguiente
mozlineargradient([||<ngulo>,]?,[,]*)

Queaunquepuedeparecercomplicadaesrealmentesencilla.Veamosunejemplo,sideseamosundegradadodenegroablancodesdearriba,escribimos
background:mozlineargradient(top,black,white);

Webkit
LasintxisdeWebkit,vlidaparaChromeySafari,eslasiguiente.
webkitgradient(,[,]?,[,]?[,]*)

EsunpocomscomplejaperoalavezmspotentequeladeMozilla.Enestecaso,paragenerarelmismodegradodeantesescribiramos,
background:webkitgradient(linear,00,0100%,from(black),to(white));

Bsicamenteloqueledecimosesquehagaundegradadolineal,desdeelpunto00(queeslaesquinasuperiorizquierda)hastaelpunto0100%(queeslaesquina
inferiorizquierda)desdeelcolornegroalcolorblanco.

Degradadosmscomplejos
Ydigamosquenecesitamoscreardegradadosmscomplejos.Porejemplo,eltpicodegradadoqueserealizaelprincipioyluegomantieneelmismocoloshastael
finaldelapgina.Paraesoesparaloqueseutilizanlosstops.
Digamosquequeremoscrearundegradadodenegroablancoenlosprimeros40pixels,yelrestohastaelfinalenblanco.Laformadehacerlosera
background:mozlineargradient(top,black,white40px);
background:webkitgradient(linear,00,010%,from(black),to(white));

Miconsejoesqueutilicisestatcnicasiemprequepodis.DaigualsinoseveigualenInternetExplorer.Lomejoresenestoscasos,ysiemprequeseaviablepara
eldiseo,ponerunfondodecolorfijo.
Enlademodeesteartculosepuedeverenfuncionamiento,evidentementesiestisusandoExplorernovaisavernada...
Readmore...

UnslideshowsoloconCSS3
14Jul2011Tags:Html/css,
EscritoporAlejandroCastillo6
EsteslidelonicoqueutilizaparasuanimacinesCSS3,nadadejScript.Elnicoinconvenienteesqueaunnoestestandarizadoentodoslosnavegadores.
ActualmentesoloOpera,SafariyChromelosoportan
ActualmenteFirefoxesttrabajandoenelloysepreveequeensuactualizacinv3.7yasepuedaver.ComosiemprelanotadiscordanteladaExplorer,quese
tampocoloaceptayalparecersolamenteloharsuversinIE9.

Readmore...

CmousarGoogleFontdeformafcil
25May2011Tags:Html/css,
EscritoporLauraVilar2
HaceapenasunosdasGooglelanzunaaplicacinllamadaGoogleFontquenospermitealosdesarrolladoresutilizartipografasdistintasalasestandar,
consiguiendoasdarleuntoquediferentealawebytodoellosintenerquesubirarchivosdetipografasanuestroservidor.
Veamosentoncesalgunospuntosquenosinteresarsaber...
Qutipografastengodisponiblesparautilizar?
PueslastienestodasenestecatlogodetipografiasqueGooglehaconfeccionado.Ahoramismohaydisponiblesunas18familiasnoobstante,esmsqueobvioque
estenmeroircreciendo!!
http://www.axtro.es/blogs/41602/noticias?tag=HTML/CSS

4/18

28/11/2014

NewsAxtroApps

Quganamoslosdesarrolladoreswebutilizandoestaaplicacin?
Ahorraremostiempoentransferencia
Ganaremosenvelocidaddecargadelapgina
Podremosutilizardistintasfamiliasdetipografasenunamismapginaweb,peroojo!!queestonosignifiquequevayamosadejardeladolaestticayla
usabilidaddeunaweb.
CmousoestasfuentesdelGoogleFontDirectory?
EstansencillocomohacerunallamadaaunahojadeestilosqueGooglehabrcreadoypublicadoenInternet.Oloqueeslomismo,copiarestalneadecdigoen
el<head>denuestrapgina:
<linkrel="stylesheet"type="text/css"href="http://fonts.googleapis.com/css?family=Font+Name">

Dondedeberemoscambiartansloeldatoreferenteaelnombredelafuenteo"Font+Name,porejemplosiqueremosuntilizarlafuenteCantarellecribiremos:
<linkhref='http://fonts.googleapis.com/css?family=Cantarell'rel='stylesheet'type='text/css'>
Msfciltodava!desdeelGoogleFontDirectorypodremosobtenerelcdigodirectamentepulsandoen"GetCode"dentrodelaprevisualizacindelafuente:

Untip!!Siqueremossintetizarelcdigocuandovayamosautilizarmsdeunafuentelopodemosexpresarasentanslounalneadecdigo:
<linkrel="stylesheet"type="text/css"href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">

Ybsicamenteestodoloquehayquehacer.Laverdadesqueessencilloyventajoso.:)
Readmore...

Cmocentrarunelementohorizontalyverticalmenteenelnavegador
10May2011Tags:Html/css,
EscritoporAlejandroCastillo1
Mehasucedidovariasvecesquelosclientesexigencomorequisitoquesupginanopresenteunscrollhaciaabajo,quetodosucedaytranscurraenlamisma
pantalla.Sitrasunaacertadayfundamentadaexplicacinnologramossacarlodesuempeo,aqulesdejolasolucin.
Alinearundivhorizontalmenteseutilizaconfrecuencia:margin:0autoElproblemaescuandotenemosqueaplicarloverticalmente,porqueelvalignnofunciona
paraeso.
Loprimeroesaplicarlealdivquevaacontenerelcontenidoquequeremosqueaparezcacentradounanchoyaltofijo,ascomounoverflow:hiddenparaqueen
casodequedentrohayaalgnelementocondimensionessuperiores,estenosesalgadesucontenedor.
<divid=main_content>
<!contenido>
</div>
#main_content{
width:960px
height:600px
overflow:hidden
}
Seleaadeposition:absoluteconuntop:50%yleft:50%yveremosqueeldivasumecomocoordenadaxyjustamenteelcentrodelapgina.

http://www.axtro.es/blogs/41602/noticias?tag=HTML/CSS

5/18

28/11/2014

NewsAxtroApps

Ejemplodecmoquedalcdigo

Paracorregirestoledamosunmargintopymarginleftnegativoconunvalorquesealamitaddelaalturaylamitaddelanchoyyaest.
Ejemplo:
#main_content{
width:960px
height:600px
overflow:hidden

position:absolute
top:50%
left:50%
margintop:300px
marginleft:480px
}
resultadofinal

Readmore...

CmoinsertarunSWFenunXHTMLStrict
29Apr2011Tags:Html/css,
EscritoporAlejandroCastillo1
Aunquecadavezseusamenos,aunmuchaspersonassiguenutilizandoelementosflashdentrodelHTMLdesusdiseosweb.Cuandosemaquetaenprogramascon
interfacesamigablesparapersonasquenosonprogramadores,osea,muchosdiseadores,comoporejemploDreamweaver,estossoftwareshaceneltrabajosuciode
escribirelcdigomientrasqueparaelusuarioesalaborseresumeenbuscarenelordenadorelswfyhacerclicenaceptar.
SiinvestigamoselHTMLgeneradodondesehainsertadoelswf,veremosuncdigocomoeste:

<OBJECTCLASSID="clsid:D27CDB6EAE6D11cf96B8444553540000"width="250"height="100"CODEBASE="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4
<PARAMNAME="MOVIE"VALUE="pelicula.swf">
<PARAMNAME="PLAY"VALUE="true">
<PARAMNAME="LOOP"VALUE="true">
<PARAMNAME="QUALITY"VALUE="high">
<EMBEDSRC="pelicula.swf"width="250"height="100"PLAY="true"LOOP="true"QUALITY="high"PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?
</EMBED>
</OBJECT>

SicopiamosestecdigoennuestroXHTMLStrictysubstituimoselnombredelapelculaswf,ylasdimensionesdelaltoyancholasajustamosanuestros
intereses,tendremoscomoresultadonuestrapelculaflashreproducindoseconstantemente.Elnicoproblemaesqueestecdigonorespetalosestndaressegnla
declaracindeDoctypedeldocumentoStrict.
Paraquenuestrocdigoestvalidado,existeotraopcin:
<objecttype="application/xshockwaveflash"data="images/banner.swf"width="288"height="128">
<paramname="movie"value="pelicula.swf"/>

http://www.axtro.es/blogs/41602/noticias?tag=HTML/CSS

6/18

28/11/2014

NewsAxtroApps

<imgsrc="pelicula.gif"width="288"height="128"alt="banner"/>(enestalneasedeclaraunaimagendesubstitucinsinoseencuentraelswf)
</object>

Readmore...

AlmacenamientoconHTML5:AlmacenamientoSql
21Apr2011Tags:Html/css,Javascript,
EscritoporJoseM.Carbonell10
Esteartculoeselsegundodeunaseriede3artculos:
AlmacenamientoconHTML:Almacenamientolocal
AlmacenamientoconHTML:AlmacenamientoSQL
AlmacenamientoconHTML:Ejemplodeaplicacin

Basededatoslocal
OtrotipodealmacenamientodisponibleenlaespecificacindeHTML5eselWebSQLDatabaseoBasedeDatosWebSql.Estetipodealmacenamientodefineuna
APIparaalmacenardatosenbasesdedatoslocalesquepuedenserconsultadasusandounavariantedeSQL.
Estafuncionalidadtodavanoestimplementadaentodoslosnavegadores.Dehecho,losnicosnavegadoresquelaimplementan,afechadehoy,sonaquellosque
utilizanWebkitcomomotorderenderizado.Entreellos,GoogleChrome,Safari,SafariMobile,etc..
MozillaFirefoxtodavanotienebasesdedatoslocalesyposiblementeInternetExplorernolasoportejams.
NotaqueparalosejemplosdeesteartculonecesitarsunnavegadorcompatibleyqueHTML5estsiendodesarrolladotodava,porloqueloexplicadoaqu
puedecambiarenelfuturo.
Conectando
Loprimeroesabrirunaconexinconlabasededatos.EstoserealizaconlafuncinopenDatabase(name,version,description,size).openDatabase()necesita4
argumentos:
nameEselnombredelabasededatos.
versionLaversindelabasededatos.
descriptionEsunadescripcindadaalabasededatosquepuedeservirparainformardelpropsitodelabasededatos.
sizeEsuntamaoaproximadodeltamaodelabasededatos.Especialmentetilparaqueelnavegadorprepareelespacionecesarioparaalmacenarlosdatos.

Estetamaoesvariable.
Porejemplo:
vardb=openDatabase("DemoSqlStorage","1.0","Basededatosdeprueba",5*1024*1024);

Encasodequeocurraalgnerror,ynosepuedaconectarconlabasededatos,openDatabase()devolvernullporloquepodemoscomprobarsitodohaidobien:
vardb=openDatabase("DemoSqlStorage","1.0","Basededatosdeprueba",5*1024*1024);
if(db){
alert("Laconexinseharealizadocorrectamente.");
}else{
alert("Nosehapodidoestablecerconexinconlabasededatos.");
}

Unerrorpuedeserqueelnavegadornosdeniegueelaccesoporcuestionesdeseguridadosihemosalcanzadoeltamaomximodeespaciodisponibleenel
dispositivo.

Democonexin

Transacciones
LasconsultasserealizansobreelobjetodevueltoporlafuncinopenDatabase()pormediodelafuncintransaction.transaction()puederecibirde1a3
argumentos:
transaction_function(tx)Setratadeunafuncinannimaqueseencargaderealizarlatransaccin.
error_callback(tx)Setratadeunafuncinannimaqueseejecutaencasodequeocurraunerrorenlatransaccinylafuncindelatransaccinnotiene

ningncallbackparaelmanejodeerrores.
success_callback(tx)Setratadeunafuncinannimaqueseejecutasilatransaccinterminacorrectamenteylafuncindetransaccinnotieneningn

callbackparaelmanejodexitos.
Estasfuncionespuedenpuedenrecibirlatransaccincomoargumento.
Ejemplo:
error_callback=function(tx){alert("Errorenlatransaccin");};
success_callback=function(tx){alert("Transaccincorrecta");};
db.transaction(function(tx){},error_callback,success_callback)

http://www.axtro.es/blogs/41602/noticias?tag=HTML/CSS

7/18

28/11/2014

NewsAxtroApps

Demotransaccinexitosa

Consultas
LasconsultasSQLserealizanenelcontextodeunatransaccinmediantelafuncinexecuteSql().Estafuncinpuederecibirhasta4argumentos:
sqlEsunaconsultaSQL.
executeSql('SELECTtitleFROMmovies');
argsPermitesustituirvariablesenlasconsultasSQLsinriesgosdevulnerabilidadesdeinyeccinSQL:
varid=1202;
executeSQL('SELECTtitleFROMmoviesWHEREid=?',[id]);
success_callback(tx,result)Funcinqueseejecutacuandolaconsultaseejecutacorrectamente.Recibecomoargumentoslatransaccinyelobjetodelresultado:
varid=1202;
executeSQL('SELECTtitleFROMmoviesWHEREid=?',[id],function(tx,result){});
error_callback(tx,error)Funcinqueseejecutacuandolaconsultaseejecutacorrectamente.Recibecomoargumentoslatransaccinyelobjetodelerror:
varid=1202;
executeSQL('SELECTtitleFROMmoviesWHEREid=?',[id],function(tx,result){},function(tx,error){});

Consultasconxito
Enelcallbacksuccess_callback(tx,result),resultesunobjetoconlossiguientesatributos:
insertId:Eseliddelafilainsertadaencasodehaberseinsertadounafilaodelaltimafilasisehaninsertadovarias.Sinosehainsertadonadalanzaruna

excepcin.
rowsAffected:DevuelveelnumerodefilasafectadasporlaconsultaSQL.ParaconsultasSELECTsuvalores0,yaqueconsultarnomodificaningunafila.
rows:DevuelveunalistaordenadadelasfilasdevueltasporlaconsultaSQL.Estalistatienelasiguienteinterfaz:
lengh:Nmerodefilas.
item(n):funcinparaobtenerlafiladeunndicendado.

Consultaserrneas
Enelcallbackerror_callback(tx,error),erroresunobjetoconlossiguientesatributos:
code:Cdigodeerror.
message:Elmensajedeerror.

Ejemplodeunaconsultaerrnea:
vardb=openDatabase("DemoSqlStorage","1.0","Basededatosdeprueba",5*1024*1024);
db.transaction(function(tx){
tx.executeSql('select*fromproductos',[],
function(tx,result){
alert('Consultaexitosa');
},
function(tx,error){
alert('Sehaproducidoelsiguienteerror:\n'+error.message);
}
);
});

Demotransaccinerrnea

Ejemplodeunaconsultaexitosa:
vardb=openDatabase("DemoSqlStorage","1.0","Basededatosdeprueba",5*1024*1024);
db.transaction(function(tx){
//Enestecasocreamoslatablaantesdeconsultarla
tx.executeSql('CREATETABLEproductos(idrealunique,nametext)');
tx.executeSql('select*fromproductos',[],
function(tx,result){
alert('Consultaexitosa\n'+result.rows.length+'filasencontradas');
},
function(tx,error){
alert('Sehaproducidoelsiguienteerror:\n'+error.message);
}
);
//Borramoslatabla
tx.executeSql('DELETEproductos');
});

Demotransaccinexitosa

Inserciones
http://www.axtro.es/blogs/41602/noticias?tag=HTML/CSS

8/18

28/11/2014

NewsAxtroApps

LainsercindefilasenlabasededatosserealizadeformaseguraevitandoinyeccionesdeSQL:
varnombre="Producto1";
varprecio=220;
db.transaction(
function(tx){
tx.executeSql("INSERTINTOproductos(name,price)values(?,?)",[nombre,precio]);
}
)

Enesteejemplo,elvalordenombreypreciosustituirnlossignosdeinterrogacindelaconsultadasdandocomoresultado:
INSERTINTOproductos(name,price)values("Producto1",220);

Ejemplo
Losiguienteesunejemploconlasoperacionesmsfrecuentes:
vardb=openDatabase("DemoSqlStorage","1.0","Basededatosdeprueba",5*1024*1024);
varsql="CREATETABLEproductos(idREALUNIQUE,nameTEXT,priceFLOAT,timestampREAL)";
db.transaction(
function(tx){
tx.executeSql(sql,[],
function(tx,result){
alert('Tablacreada');
},
function(tx,error){
alert('Error:'+error.message);
}
);
}
);

CreacindelatablaProductos

varsql="SELECTcount(*)FROMproductos";
db.transaction(
function(tx){
tx.executeSql(sql,[],
function(tx,result){
if(result.rows.length==1){
alert('Ejecucincorrecta.\n'+result.rows.item(0)['count(*)']+'productosencontrados.');
}
},
function(tx,error){
alert('Error:'+error.message);
}
);
}
);

Consultatotalproductos

varsql="SELECT*FROMproductosorderbytimestampDESClimit5";
db.transaction(
function(tx){
tx.executeSql(sql,[],
function(tx,result){
if(result.rows.length>0){
varsize=result.rows.length;
varstr="";
for(vari=0;i<5&&i<size;i++){
varproduct=result.rows.item(i);
str+="Producto:"+product.name+"Precio:"+product.price+"\n";
}
alert('Ejecucincorrecta.\nltimos'+result.rows.length+'productos.\n'+str);
}else{
alert('Ejecucincorrecta.\nTodavanohayproductos.');
}
},
function(tx,error){
alert('Error:'+error.message);
}
);
}
);

ltimosproductos

varname=prompt("Introduceelnombredelproducto");
varprice=prompt("Introduceelpreciodelproducto");
if(!!name&&!!price){
varsql="INSERTINTOproductos(name,price,timestamp)values(?,?,?)";
db.transaction(
function(tx){

http://www.axtro.es/blogs/41602/noticias?tag=HTML/CSS

9/18

28/11/2014

NewsAxtroApps

tx.executeSql(sql,[name,price,newDate().getTime()],
function(tx,result){
alert('Ejecucincorrecta.\n'+result.rowsAffected+'productosafectados');
},
function(tx,error){
alert('Error:'+error.message);
}
);
}
);
}else{
alert("Losvaloresnosoncorrectos,nopuedecrearseelproducto.");
}

Insercindeproductos

varquery=prompt("Busquedapornombre");
varsql="SELECT*FROMproductoswherenameLIKE?";
this._db.transaction(
function(tx){
tx.executeSql(sql,["%"+query+"%"],
function(tx,result){
if(result.rows.length>0){
varsize=result.rows.length;
varstr="";
for(vari=0;i<5&&i<size;i++){
varproduct=result.rows.item(i);
str+="Producto:"+product.name+"Precio:"+product.price+"\n";
}
alert('Ejecucincorrecta.\n'+result.rows.length+'productosencontradoscon'+query+'.\n'+str);
}else{
alert('Ejecucincorrecta.\nNosehanencontradoproductos.');
}
},
function(tx,error){
alert('Error:'+error.message);
}
);
}
);

Bsquedadeproductos

varsql="DROPTABLEproductos";
this._db.transaction(
function(tx){
tx.executeSql(sql,[],
function(tx,result){
alert('Ejecucincorrecta.\n'+result.rowsAffected+'filasafectadas.');
},
function(tx,error){
alert('Error:'+error.message);
}
);
}
);

BorradodelatablaProductos

Readmore...

AlmacenamientoconHTML5:Almacenamientolocal
16Apr2011Tags:Html/css,Javascript,
EscritoporJoseM.Carbonell1
Esteartculoeselprimerodeunaseriede3artculos:
AlmacenamientoconHTML:Almacenamientolocal
AlmacenamientoconHTML:AlmacenamientoSQL
AlmacenamientoconHTML:Ejemplodeaplicacin

Introduccin
ElalmacenamientodeHTML5proporcionaunaformadealmacenarinformacinenelnavegadordeformasimilaralascookies,perodiseadoparaalmacenar
grandescantidadesdeinformacin.
Lascookiestienenlimitacionesdetamaoylosnavegadoreslasenvanalservidorcadavezqueserecargalapgina,consumiendotiempoyanchodebandaextras.
ElalmacenamientodeHTML5almacenalosdatosenelnavegadorylaspginaswebsaccedenastosconjavascriptunavezlapginasestncargadas.
Existen3tiposdealmacenamientoenHTML5:
LocalPermitealmacenardatosenparesclave/valorenlamquinadelusuario.Losdatosalmacenadossonnicosaldominio.(preferencias)
http://www.axtro.es/blogs/41602/noticias?tag=HTML/CSS

10/18

28/11/2014

NewsAxtroApps

SesinPermitealmacenardatosenparesclave/valor,nicamentevlidosdurantelasesin.(carrosdecompraoestadodeaplicacin)
BasededatosPermitealmacenardatosrelacionalesofreciendounaAPIdebasededatosSQL,contodoloqueelloimplica.

LainterfazStorage
Tantoelalmacenamientolocalcomoeldesesinutilizanlamismainterfazparaaccederlainformacin.Sielnavegadorescompatibleconestacaractersticade
HTML5entoncesestndisponibleslosobjetoslocalStorageysessionStorage,paraalmacenamientolocalydesesinrespectivamente.Ambosimplementanla
interfazStorageyofrecenlassiguientesfunciones:
length

Devuelveelnumerodeparesclave/valorpresentes.
localStorage.length
//0
setItem(key,value)

Creaunparclave/valor
localStorage.setItem('altura','100');
localStorage.setItem('anchura','500');
key(n)

Devuelvelaclavedelparenlaposicinindicada.
localStorage.length
//2
localStorage.key(0);
//"altura"
localStorage.key(1);
//"anchura"
getItem(key)

Obtieneelvalordeunaclavedada
localStorage.getItem('altura');
//"100"
removeItem(key)

Eliminaunparclave/valor
localStorage.length
//2
localStorage.removeItem('altura');
localStorage.length
//1
clear()

Eliminatodoslosparesactualesexistentes.
localStorage.length
//1
localStorage.clear();
localStorage.length;
//0

EnlosejemplosheusadolocalStorage,peroelefectoeselmismoconsessionStorageyaqueambosimplementanestainterfaz.
LainterfazStorageesextremadamentesimple,tantolaclavecomoelvalorsernconvertidosacadenas,porloquesiqueremosalmacenarestructuras,comolistasu
otrosobjetospodemosutilizarJSON.
varlist=[1,2,3,4];
localStorage.setItem('lista',list);
localStorage.getItem('lista');
//"1,2,3,4"
varjson_list=JSON.stringify(list);
//"[1,2,3,4]"
localStorage.setItem('lista',json_list);
//"[1,2,3,4]"
JSON.parse(localStorage.getItem('lista'));
//[1,2,3,4]

Almacenamientolocal
Elalmacenamientolocalnospermitealmacenardatosenelclientepersistirdatosenelcliente.Estosdatossealmacenanenreferenciaaundominioporloquenoes
posibleaccederalainformacinalmacenadaenotroyestarndisponibleshastaqueelusuarioelusuarioloselimineloqueloshaceidealesparacontener
preferenciasdeaplicacin.
Porejemplo,unaaplicacinpuedeofrecervariospanelesconcontenidoyelusuariopuedeseleccionarcualesquieretenerabiertosycualesocultos.Asuna
preferenciadeusuariopuedeser:
localStorage.setItem('paneles','1:2:3:4');

Demo

Almacenamientodesesin
Elalmacenamientodesesinnospermitealmacenarinformacinaserusadamientrasdurelasesin.Laduracindelasesindependedelnavegador.Algunos
navegadoresconsideranlasesinmientrasdureelproceso,otrosmientraslapestaasigaabierta.
Elalmacenamientodesesinesperfectoparaalmacenarelestadodelasesindeusuario.Estainformacinpuedesertantoelestadodeuncarrodelacompra,el
ltimoproductovisto,etc...
sessionStorage.setItem('cart_items',[112,120,320]);
varitems=sessionStorage.getItem('cart_items');

http://www.axtro.es/blogs/41602/noticias?tag=HTML/CSS

11/18

28/11/2014

NewsAxtroApps

if(items){
items=JSON.parse(items);
alert('Itemsenelcarrodelacompra:'+items.length);
}else{
alert('Nohayitemsenelcarrodelacompra');
}

Demo
Readmore...

PropiedaddeCSSwhitespace
12Apr2011Tags:Html/css,
EscritoporAlejandroCastillo0
EltratamientodelosespaciosenblancoenelcdigoHTMLesunadelascaractersticasmsdesconcertantesparalosdiseadoreswebquecomienzanacrear
pginas.Acontinuacinsemuestracmovisualizanlosnavegadoresdosprrafosdeejemplo:

Loremipsumdolorsitamet,consectetueradipiscingelit.Sednonsemquistellusvulputatelobortis.Vivamusfermentum,tortoridornareultrices,ligulaipsum
tinciduntpede,etblanditsempedesuscipitpede.Nullacursusportasem.Donecmollisnuncinleo.
Loremipsumdolorsitamet,consectetueradipiscingelit.Sednonsemquistellusvulputatelobortis.Vivamusfermentum,tortoridornareultrices,ligulaipsum
tinciduntpede,etblanditsempedesuscipitpede.Nullacursusportasem.Donecmollisnuncinleo.

Aunquelosdosprrafosanterioressevisualizandelamismaforma,enrealidadsucdigoHTMLescompletamentediferente:
<p>Loremipsumdolorsitamet,consectetueradipiscingelit.Sednon
semquistellusvulputatelobortis.Vivamusfermentum,tortorid
ornareultrices,ligulaipsumtinciduntpede,etblanditsempede
suscipitpede.Nullacursusportasem.Donecmollisnuncinleo.</p>
<p>Loremipsumdolorsitamet,consectetueradipiscingelit.
Sednonsemquistellusvulputatelobortis.Vivamusfermentum,
tortoridornareultrices,ligulaipsumtinciduntpede,etblandit
sempedesuscipitpede.Nullacursusportasem.Donecmollisnunc
inleo.</p>

Elsegundoprrafocontienenumerososespaciosenblancoysaltosdelnea.Sinembargo,comolosnavegadoreseliminanautomticamentetodoslosespaciosen
blancosobrantes,losdosprrafossevenexactamenteigual.
EnelestndarHTMLun"espacioenblanco"puedeserunsaltodelnea,untabuladoryunespacioenblanconormal.Losnavegadoreseliminandeforma
automticatodoslosespaciosenblancosobrantessalvoelespacioenblancoqueseparalaspalabrasdeltexto.
Lanicaexcepcindeestecomportamientoeslaetiqueta<pre>deHTML,utilizadaparamostrartextoqueyatieneformato(sunombrevienedepreformateado)y
queportantorespetatodoslosespaciosenblancoytodoslossaltosdelnea:
Loremipsumdolorsitamet,consectetueradipiscingelit.
Sednonsemquistellusvulputatelobortis.Vivamusfermentum,tortor
idornareultrices,ligulaipsumtinciduntpede,etblandit
sempedesuscipitpede.Nullacursusportasem.Donecmollisnuncinleo.

ElcdigoHTMLdelejemploanteriores:
<pre>Loremipsumdolorsitamet,consectetueradipiscingelit.
Sednonsemquistellusvulputatelobortis.Vivamusfermentum,tortor
idornareultrices,ligulaipsumtinciduntpede,etblandit
sempedesuscipitpede.Nullacursusportasem.Donecmollisnuncinleo.</pre>

Lapropiedadwhitespacepermitevariarelcomportamientodelosespaciosenblanco.ElestndarCSS2.1definecincomodelosdiferentesdetratamientode
espaciosenblanco:
normal:losespaciosenblancosobrantesylossaltosdelneaseeliminan.Noobstante,eltextosemuestraentantaslneascomoseanecesarioparaquesus
contenidosnosesalgandelelementocontenedor.
pre:noseeliminanlosespaciosenblancosobrantesyslosemuestranlossaltosdelneaincluidoseneltextooriginal.Estecomportamientopuedeprovocar
queloscontenidosdetextosesalgandesuelementocontenedor.
nowrap:secomportaigualquenormalenlosespaciosenblanco,peronoaadesaltosdelneaeneltextooriginal,porloqueloscontenidossepuedensalir
desuelementocontenedor.
prewrap:secomportaigualquepre,peroseintroducenlossaltosdelneaqueseannecesariosparaqueloscontenidosdetextonuncasesalgandesu
elementocontenedor.
preline:seeliminanlosespaciosenblancosobrantes,peroserespetanlossaltosdelneaoriginalesysecreantantossaltosdelneacomoseannecesarios
paraqueelcontenidodetextonosesalgadesuelementocontenedor.
ComolasexplicacionesincludasenelestndarCSS2.1puedenllegaraserconfusas,lasiguientetablaresumeelcomportamientodecadavalor:
Valor

Respetaespaciosenblanco

Respetasaltosdelnea

Ajustalaslneas

normal

no

no

si

pre

si

si

no

nowrap

no

no

no

prewrap

si

si

si

preline

no

si

si

Acontinuacinsemuestraelefectodecadamodelodetratamientodeespaciosenblancosobreunmismoprrafoquecontieneespaciosenblancoysaltosdelneay
queseencuentradentrodeunelementocontenedordeanchuralimitada:

http://www.axtro.es/blogs/41602/noticias?tag=HTML/CSS

12/18

28/11/2014

NewsAxtroApps

[whitespace:normal]Loremipsumdolorsitamet,consectetueradipiscingelit.
Vestibulumdictum.Classaptenttacitisociosquadlitoratorquentperconubia
nostra,perinceptoshymenaeos.

[whitespace:pre]Loremipsumdolorsitamet,consectetueradipiscingelit.Vestibulumdictum.Classaptenttacitisociosquadlitoratorquentperconubian
[whitespace:prewrap]Loremipsumdolorsitamet,consectetuer
adipiscingelit.Vestibulumdictum.Classaptenttacitisociosquadlitora
torquentperconubianostra,perinceptoshymenaeos.

[whitespace:nowrap]Loremipsumdolorsitamet,consectetueradipiscingelit.Vestibulumdictum.Classaptenttacitisociosquadlitoratorquentperconubianostra,perin
[whitespace:preline]Loremipsumdolorsitamet,consectetueradipiscing
elit.Vestibulumdictum.Classaptenttacitisociosquadlitoratorquentper
conubianostra,perinceptoshymenaeos.

Losvaloresmsutilizadossonnormal,preyprewrap.Elvalornormalsepuedeemplearporejemploenunelemento<pre>quesequieremostrarcomosifueraun
prrafo:
<pre>Loremipsumdolorsitamet,consectetueradipiscingelit.
Sednonsemquistellusvulputatelobortis.Vivamusfermentum,tortor
idornareultrices,ligulaipsumtinciduntpede,etblandit
sempedesuscipitpede.Nullacursusportasem.Donecmollisnuncinleo.</pre>

<prestyle="whitespace:normal">Loremipsumdolorsitamet,consectetueradipiscingelit.Sednonsemquistellusvulputatelobortis.Vivamus
fermentum,tortoridornareultrices,ligulaipsumtinciduntpede,etblanditsempedesuscipitpede.Nullacursusportasem.Donecmollisnuncin
leo.</pre>

Delamismaforma,elvalorpresepuedeemplearenunprrafodetextoquesequieremostrarcomosifueraunelemento<pre>:

<p>Loremipsumdolorsitamet,consectetueradipiscingelit.Sednonsemquistellusvulputatelobortis.Vivamusfermentum,tortoridornareultrices,ligula
ipsumtinciduntpede,etblanditsempedesuscipitpede.Nullacursusportasem.Donecmollisnuncinleo.</p>

<pstyle="whitespace:pre">Loremipsumdolorsitamet,consectetueradipiscingelit.Sednonsemquistellusvulputatelobortis.Vivamusfermentum,tortorid

Porltimo,elvalorprewrapesmuytilcuandosequieremostraruntextodelaformamsfielposibleasuformatooriginal(respetandoespaciosenblancoysaltos
delnea)perosinqueelcontenidodetextosesalgadesuelementocontenedor.
Readmore...

http://www.axtro.es/blogs/41602/noticias?tag=HTML/CSS

13/18